<template>
	<view>
		<!-- 自定义头部导航 -->
		<page-meta>
		    <navigation-bar
		      :title="total?'异常信息 (' + total + ')': '异常信息'"
		      front-color="#000000"
		      background-color="#FBFBFF"
			  fixed
		    />
		</page-meta>
		<!-- 列表 -->
		<u-list @scrolltolower="scrolltolower" class="list" v-if="total">
			<u-list-item v-for="(item, index) in indexList" :key="item.id">
				<view class="card">
					<view class="left">
						{{index + 1}}
					</view>
					<view class="right">
						<view class="title">
							RFID：{{item.id}}
						</view>
						<view class="body">
							{{item.msgBody || '暂无原因'}}
						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
		<!-- 空数据 -->
		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onPullDownRefresh, onPageScroll } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { PageResult } from '@/types/type';

const props = defineProps({
  id: {
    type: String,
    default: '',
  }
});

const indexList = ref([]);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);

const scrollTop = ref(0);

onPageScroll((e)=> {
	console.log('滚动', e)
	scrollTop.value = e.scrollTop
})

onShow(()=>{
	loadmore();
})

onPullDownRefresh(()=> {
	current.value = 0;
	indexList.value = [];
	loadmore('refresh');
})

async function loadmore (type?: string) {
	try{
		current.value += 1
		const result: PageResult<any>  = await http({
			method: 'POST',
			url: '/system/sysmessage/queryByPage',
			data: {
				current: current.value,
				size: 20,
				data: {
					id: Number(props.id)
				}
			}
		})
		const list = result.data;
		totalPage.value = result.page;
		total.value = result.total;
		for (let i = 0; i < list.length; i++) {
			indexList.value.push(list[i]);
		}
		type === 'refresh' && uni.stopPullDownRefresh();
	}catch(e){
		console.log(e)
	}
	
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
</script>

<style lang="scss" scoped>
	.list {
		// :deep(.uni-scroll-view) {
		// 	overflow: visible !important;
		// }
		.card {
			margin: $uni-page-padding;
			margin-top: 5px;
			margin-bottom: 5px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0,0,0,0.1);
			.left {
				flex-basis: 90rpx;
				text-align: center;
				font-size: 13px;
				color: rgba(0,0,0,0.5);
			}
			.right {
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
				}
				.body {
					color: rgba(238,129,48,0.8);
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
</style>
